<template>
	<view style="position: relative;">
		
		<!-- <uni-nav-bar :fixed="false" color="#ffffff"  :status-bar="true" background-color="#3291F8">
			
		</uni-nav-bar> -->
		<view class="head" @tap="$util.toUrl('../gerenziliao/gerenziliao')">
			<view class="touxiang">
				<image :src="user.http" mode=""></image>
			</view>
			<view class="yonghuxinxi">
				<view class="ming-renzheng">
					<view class="username">{{user.username}}</view>
					<view v-if="user.attestation==0" class="renzheng">未认证</view>
					<view v-if="user.attestation==2" class="renzheng">已认证</view>
					<view v-if="user.attestation==1" class="renzheng">审核中</view>
					<view v-if="user.attestation==3" class="renzheng">认证失败</view>
				</view>
				<view class="ids">
					<view v-if="user.type==1" class="shangjiaid">买家ID：{{user.id}}</view>
					<view v-else class="shangjiaid">商家ID：{{user.id}}</view>
					<view v-if="isTuandui==1" class="shangjiaid" style="margin-left: 8rpx;">团队ID：{{user.tuanduiid}}</view>
				</view>
			</view>
			<view class="toUserInfo">
				<image src="../../static/image/jinru.png" mode=""></image>
			</view>
		</view>
		<view class="icon-list-div">
			<view style="padding:0 24rpx;">
				<view class="icon-list">
					<view class="rezheng-zhongxin" @tap="$util.toUrl('./renzhengguanli')">
						<image src="../../static/image/renzhengzhongxin.png" mode="" ></image>
						<view class="">认证中心</view>
					</view>
					<view class="rezheng-zhongxin" @tap="$util.toUrl('./qianbao')">
						<image src="../../static/image/qianbao.png" mode=""></image>
						<view class="">钱包</view>
					</view>
					<view class="rezheng-zhongxin" @tap="kefu()">
						<image src="../../static/image/zaixiankefu.png" mode=""></image>
						<view class="" >在线客服</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fenlei">
			<view class="fenlei1">
				<!-- <view class="fenlei11" @tap="$util.toUrl('./shangjiazhongxin')" v-if="user.type==2">
					<image src="../../static/image/shangjiazhongxin.png" mode="" class="fenlei112"></image>
					<view class="fenlei113">商家中心</view>
					<image src="../../static/image/qianjin.png" mode="" class="fenlei111"></image>
				</view>
				<view class="fenlei11" @tap="$util.toUrl('../index/woderenwu')" v-else>
					<image src="../../static/image/shangjiazhongxin.png" mode="" class="fenlei112"></image>
					<view class="fenlei113">我的任务</view>
					<image src="../../static/image/qianjin.png" mode="" class="fenlei111"></image>
				</view> -->
				<view class="fenlei11" @tap="jiarujiazu()">
					<image src="../../static/image/wodejiazu.png" mode="" class="fenlei112"></image>
					<view class="fenlei113">我的家族</view>
					<view v-if="isTuandui==0" class="fenlei115" style="color: #8A8B90;">申请家族</view>
					<view v-else class="fenlei115">团队ID:{{user.tuanduiid}}</view>
					<image src="../../static/image/qianjin.png" mode="" class="fenlei111"></image>
				</view>
				<view class="fenlei11" @tap="$util.toUrl('../changjianwenti/changjianwenti')">
					<image src="../../static/image/changjianwenti.png" mode="" class="fenlei112"></image>
					<view class="fenlei113">常见问题</view>
					<image src="../../static/image/qianjin.png" mode="" class="fenlei111"></image>
				</view>
				<view class="fenlei11" style="border: unset;" @tap="$util.toUrl('../setting/setting')">
					<image src="../../static/image/shezhi.png" mode="" class="fenlei112"></image>
					<view class="fenlei113">设置</view>
					<image src="../../static/image/qianjin.png" mode="" class="fenlei111" ></image>
				</view>
				
			</view>
		</view>
		<selfPopupMessage ref="selfPopupMessage"></selfPopupMessage>
		<selfPopupDialog ref="selfPopupDialog" title="申请家族" placeholder="请填写用户ID加入团队" mode="input" :confirmBtn="submit"></selfPopupDialog>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		components: {
			uniNavBar
		},
		data() {
			return {
				user:{
					username:"",
					http:"../../static/image/touxaing.png",
					attestation:1,
					id:"",
					tuanduiid:"",
					type:2
				},
				isTuandui:0
			}
		},
		onPullDownRefresh() {
			var that = this;
			that.$util.nuiAjax(that.$jiekou.userInfo,{id:uni.getStorageSync("token")},function(res){
				if(res.result=="true"){
					that.user = res.data;
					uni.setStorageSync("userInfo",res.data);
					uni.stopPullDownRefresh();
					if(res.data.tuanduiid!=undefined && res.data.tuanduiid!=""){
						that.isTuandui = 1;
					}else{
						that.isTuandui=0;
					}
				}
			})
				
		},
		onLoad() {
			var that = this;
			var userinfo = uni.getStorageSync("userInfo");
			if(userinfo==undefined || userinfo == ''){
				this.$util.nuiAjax(this.$jiekou.userInfo,{id:uni.getStorageSync("token")},function(res){
					if(res.result=="true"){
						that.user = res.data;
						uni.setStorageSync("userInfo",res.data);
						if(res.data.tuanduiid!=undefined && res.data.tuanduiid!=""){
						
							that.isTuandui = 1;
						}
					}else{
						// uni.removeStorageSync("token");
						// that.$refs.selfPopupMessage.open(res.meaaage,"error");
						// that.$util.toUrl("../login/login");
					}
				})
			}else{
				that.user = userinfo;
				if(that.user.tuanduiid!=undefined && that.user.tuanduiid!=""){
					that.isTuandui = 1;
				}
			}
			
			
			//监听用户登陆
			uni.$on('userLogin',function(data){
				const userinfo = uni.getStorageSync("userInfo");
				that.user = userinfo;
			})
			uni.$on('update_user',function(data){
				that.$util.nuiAjax(that.$jiekou.userInfo,{id:uni.getStorageSync("token")},function(res){
					if(res.result=="true"){
						that.user = res.data;
						uni.setStorageSync("userInfo",res.data);
					}
				})
			})
		},
		methods: {
			kefu(){
				this.$refs.uToast.show({
					title: "请联系管理员",
					duration: 2000
				})
			},
			submit:function(value){
				console.log(value);
				if(value.trim()==""){
					that.$refs.uToast.show({
						title: "请填入用户ID",
						duration: 1000
					})
					return;
				}
				var that = this;
				var id = uni.getStorageSync("token");
				this.$util.nuiAjax(this.$jiekou.jiaruTuandui,{id:id,tuanduiUid:value},function(res){
					if(res.result=="true"){
						that.$refs.uToast.show({
							title: "加入成功",
							duration: 1000
						})
						var userInfo = uni.getStorageSync("userInfo");
						userInfo.tuanduiid = res.data;
						uni.setStorageSync("userInfo",userInfo);
						that.user.tuanduiid = res.data;
						that.isTuandui = 1;
					}else{
						that.$refs.uToast.show({
							title: res.message,
							duration: 2000
						})
					}
				})
			},
			jiarujiazu:function(){
				if(this.isTuandui != 0){
					this.$refs.uToast.show({
						title: '已加入家族',
						duration: 2000
					})
					return;
				}
				this.$refs.selfPopupDialog.open();
				
			}
		}
	}
</script>

<style lang="scss">
	.fenlei111{
		width: 16rpx;
		height: 26rpx;
		margin-top:10rpx
	}
	.fenlei112{
		width: 36rpx;
		height: 36rpx;
		margin-top: 4rpx;
	}

	.fenlei115{
		padding-right: 20rpx;
		// height:40rpx;
		font-size:28rpx;
		font-weight:400;
		line-height:50rpx;
	}
	.fenlei113{
		flex: 1;
		padding-left: 20rpx;
		// height:44rpx;
		font-size:32rpx;
		font-weight:400;
		line-height:44rpx;
	}
	.fenlei1{
		padding: 0 24rpx 0 30rpx;
		background-color: #FFFFFF;
		border-radius:8rpx;
		box-shadow:0px 0px 8px 0px rgba(227,227,227,0.5)
	}
	.fenlei11{
		display: flex;
		flex-flow: row;
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		border-bottom:1rpx solid #EEEEEE ;
	}
	
	.fenlei{
		padding: 0 24rpx;
		margin-top: 140rpx;
	}
	page{
		background-color: $page-bg-color;
	}
	.icon-list{
		display: flex;
		flex-flow: row;
		text-align: center;
		padding-top: 26rpx;
		justify-content:space-around;
		height: 192rpx;
	}
	.rezheng-zhongxin image{
		width: 100rpx;
		height: 100rpx;
	}
	.icon-list-div{
		position: absolute;
		top:338rpx;
		z-index: 1;
		width: 100%;
		height: 192rpx;
	}
	.icon-list{
		background-color: #FFFFFF;
		height: 192rpx;
		border-radius:8rpx;
		box-shadow:0px 0px 8px 0px rgba(227,227,227,0.5);
	}
	.shangjiaid{
		padding: 2rpx 8rpx 0 8rpx;
		border: 1rpx solid #FFFFFF;
		// height:34rpx;
		font-size:24rpx;
		line-height:34rpx;
		border-radius:4rpx;
	}
	.ids{
		display: flex;
		flex-flow: row;
		margin-top: 2rpx;
	}
	.renzheng{
		// height:50rpx;
		font-size:24rpx;
		font-weight:500;
		line-height:50rpx;
		padding-left: 20rpx;
	}
	.username{
		// height:50rpx;
		font-size:36rpx;
		font-weight:500;
		line-height:50rpx;
	}
	.ming-renzheng{
		display: flex;
		flex-flow: row;
	}
	.yonghuxinxi{
		padding-top: 16rpx;
		flex: 1;
		padding-left: 20rpx;
		color: #FFFFFF;
		
	}
	.toUserInfo{
		width: 18rpx;
		padding-top: 36rpx;
	}
	.toUserInfo image{
		width: 100%;
		height: 28rpx;
	}
	.head{
		 background: url(../../static/image/beijing.png) no-repeat;
		 background-size:100% 100%; 
		 display: flex;
		 flex-flow: row;
		 padding-top: 174rpx;
		 padding-bottom: 132rpx;
		 padding-left: 40rpx;
		 padding-right: 36rpx;
	}
	.status_bar {
	  height: var(--status-bar-height);
	  width: 100%;
	  background-color:"#3291F8";
	}
	.touxiang{
		width: 114rpx;
	}
	.touxiang image{
		height: 114rpx;
		width: 100%;
		border-radius:100rpx;
		border:4rpx solid rgba(236,236,236,1);
	}
</style>
